<template>
    <div class="header-container">
        <el-header height="50px">
            <el-switch v-model="sidebar"></el-switch>

            <el-dropdown size="medium" class="avatar-container pull-right mr-10" trigger="click">
                <div class="avatar-wrapper">
                    <el-image :src="userInfo.avatar||require('../../../assets/images/avatar.png')" class="user-avatar"/>
                    <i class="el-icon-caret-bottom"/>
                </div>
                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                    <el-dropdown-item disabled>{{ userInfo.name }}</el-dropdown-item>
                    <el-dropdown-item>
                        <span style="display:block;" @click="dialogManagerWechatQrcode.show = true">绑定微信</span>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <span style="display:block;" @click="dialogManagerFormSimple.show = true">修改资料</span>
                    </el-dropdown-item>
<!--                    <el-dropdown-item>-->
<!--                        <router-link class="inlineBlock" to="/">首页</router-link>-->
<!--                    </el-dropdown-item>-->
                    <el-dropdown-item divided>
                        <span style="display:block;" @click="logout">注销</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

            <div class="pull-right mr-10 setting-btn" v-if="!$ENABLE_CUSTOMER">
                <el-tooltip class="item" effect="dark" content="Command Readline" placement="bottom" v-if="$ENABLE_SOCKET">
                    <i class="el-icon-s-platform" @click="commandWindow = true"></i>
                </el-tooltip>

                <el-tooltip class="item" effect="dark" content="快速设置" placement="bottom">
                    <i class="el-icon-switch-button" @click="drawerQuickSet = true"></i>
                </el-tooltip>
            </div>
        </el-header>
<!--        <breadcrumb :is-active="true" class="hamburger-container"/>-->

        <el-drawer
            :size="'300px'"
            :with-header="false"
            :visible.sync="drawerQuickSet"
            direction="rtl">
            <quick-set v-if="drawerQuickSet"></quick-set>
        </el-drawer>

        <el-dialog
            :visible.sync="dialogManagerWechatQrcode.show"
            :append-to-body="true"
            :close-on-click-modal="false"
            width="300px"
            center>
            <manager-wechat-qrcode v-if="dialogManagerWechatQrcode.show" @success="dialogManagerWechatQrcode.show = false" type="bind"/>
        </el-dialog>

        <el-dialog
            :visible.sync="dialogManagerFormSimple.show"
            :append-to-body="true"
            :close-on-click-modal="false"
            center>
            <manager-form-simple :show="dialogManagerFormSimple.show" @submit="dialogManagerFormSimple.show = false" @cancel="dialogManagerFormSimple.show = false"/>
        </el-dialog>

        <el-dialog
            custom-class="command-window"
            center
            title="命令结果"
            :size="'300px'"
            :with-header="false"
            :visible.sync="commandWindow"
            direction="rtl">
            <command-readline/>
        </el-dialog>

        <admin-socket/>
    </div>
</template>

<script>
import Breadcrumb from './breadcrumb'
import QuickSet from '~/components/QuickSet'
import ManagerWechatQrcode from '~/views/manager/wechat-qrcode'
import ManagerFormSimple from '~/views/manager/form-simple'
import CommandReadline from '~/views/public/command-readline';
import AdminSocket from "~/views/admin-socket";

export default {
    name: "Header",
    data() {
        return {
            drawerQuickSet: false,

            dialogManagerWechatQrcode: {
                show: false,
            },
            dialogManagerFormSimple: {
                show: false,
            },
        };
    },
    components: {
        Breadcrumb,
        QuickSet,
        ManagerWechatQrcode,
        ManagerFormSimple,
        CommandReadline,
        AdminSocket,
    },
    computed: {
        sidebar: {
            get() {
                return this.$store.state.backend.sidebar;
            },
            set() {
                this.$store.dispatch('backend/toggleSidebar');
            }
        },
        commandWindow: {
            get() {
                return this.$store.state.goservice.command.window;
            },
            set() {
                this.$store.dispatch("goservice/ToggleCommandWindow");
            }
        },
        userInfo() {
            return this.$store.state.manager.info;
        },
    },
    methods: {
        logout() {
            this.$store.dispatch('manager/Logout').then(() => {
                this.$message.success('退出登录');
                this.$router.push({name: 'login'});
                // 关闭socket
                this.$ws.clear();
            });
        },
    },
    created() {
        // 获取渠道信息
        this.$store.dispatch('appSource/All', 'appSource');
        // 获取场次信息
        this.$store.dispatch('scene/All', 'scene');
        // 获取道具信息
        this.$store.dispatch('item/All', 'item');
    }
}
</script>

<style lang="scss" scoped>
    .avatar-wrapper {
        cursor: pointer;
        margin-top: 5px;
        position: relative;
        line-height: initial;
        .dd {
            display: block;
            color: #8492a6;
            font-size: 14px;
        }
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 10px;
        }

        .el-icon-caret-bottom {
            position: absolute;
            right: -20px;
            top: 25px;
            font-size: 12px;
        }
    }
    .setting-btn {
        cursor: pointer;
        font-size: 30px;
    }
    ::v-deep .command-window {
        background: black;
        color: white;
        .el-dialog__title {
            color: white;
        }
        .el-dialog__body {
            max-height: 40vh;
            overflow-y: auto;
        }

    }
</style>
